<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/manageSystem/layui/css/layui.css">
<!--    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css">-->
    <link rel="stylesheet" href="/manageSystem/css/common.css">


    <link rel="stylesheet" href="/manageSystem/layui/extend/dtree.css">
    <link rel="stylesheet" href="/manageSystem/layui/extend/font/dtreefont.css">
    <link rel="stylesheet" href="/manageSystem/layui/extend/formSelects-v4.css">
</head>

<body>
    <div class="yadmin-body animated fadeIn">
        <form action="" method="post" class="layui-form layui-form-pane" id="add-student-form">

            <!--学号-->
            <div class="layui-form-item">
                <label for="studentId" class="layui-form-label">学号</label>
                <div class="layui-input-block">
                    <input type="text" id="studentId" name="studentId" value="" lay-verify="required" lay-vertype="tips"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--姓名-->
            <div class="layui-form-item">
                <label for="studentName" class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="studentName" name="studentName" value="" lay-verify="required"
                        lay-vertype="tips" autocomplete="off" class="layui-input">
                    <!--lay-verify="required|email" lay-vertype="tips"-->
                </div>
            </div>
            <!--身份证-->
            <div class="layui-form-item">
                <label for="idCard" class="layui-form-label">身份证</label>
                <div class="layui-input-block">
                    <input type="text" id="idCard" name="idCard" value="" lay-verify="required" lay-vertype="tips"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--班级-->
            <div class="layui-form-item">
                <label for="className" class="layui-form-label">班级</label>
                <div class="layui-input-block">
                    <input type="text" id="className" name="className" value="" lay-verify="required" lay-vertype="tips"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--性别-->
            <!--单选按钮-->
            <div class="layui-form-item" pane="">
                <label class="layui-form-label" id="gender">性别</label>
                <div class="layui-input-block">
                    <input type="radio" id="man" name="gender" value="1" title="男">
                    <input type="radio" id="woman" name="gender" value="0" title="女">
                </div>
            </div>
            <!--入学类型-->
            <!--取值：{"高考","学考","3+2","成考"}。   对应的值； 高考：0.     学考：1.   3+2：2.  成考：3。-->
            <div class="layui-form-item">
                <label class="layui-form-label">入学类型</label>
                <div class="layui-input-block">
                    <label>
                        <select id="admissionType-select" name="admissionType" xm-select="role-select"
                            lay-verify="required" lay-vertype="tips">
                            <option value="">请选择</option>
                            <option value="0">高考</option>
                            <option value="1">学考</option>
                            <option value="2">3+2</option>
                            <option value="3">成考</option>
                        </select>
                    </label>
                </div>
            </div>
            <!--入学时间-->
            <!--通过点击获取时间（前台点击）-->
            <div class="layui-form-item">
                <label class="layui-form-label">入学时间</label>
                <div>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" id="test" name="admissionDate" placeholder="请选择">
                    </div>
                </div>
            </div>
            <!--就读类型-->
            <!--取值：{"非全日制","全日制"}。           对应的值；全日制：1.    非全日制：0。 -->
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">就读类型</label>
                <div class="layui-input-block" id="studyType">
                    <input type="radio" name="studyType" value="1" title="全日制" checked="checked">
                    <input type="radio" name="studyType" value="0" title="非全日制">
                </div>
            </div>
            <!--最高学历-->
            <!--取值{专科、本科、研究生、硕士、博士}-->
            <div class="layui-form-item">
                <label class="layui-form-label">最高学历</label>
                <div class="layui-input-block">
                    <!--<select name="role" xm-select="role-select"-->
                    <label>
                        <!-- <select id="educationDegree-select" name="educationDegree" xm-select="role-select"
                            lay-verify="required" lay-vertype="tips">
                            <option value="0">请选择</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select> -->
                        <select id="educationDegree-select" name="educationDegree" xm-select="role-select" lay-verify="required"
                            lay-vertype="tips">
                            <option value="">请选择</option>
                            <option value="0">专科</option>
                            <option value="1">本科</option>
                            <option value="2">研究生</option>
                            <option value="3">硕士</option>
                            <option value="4">博士</option>
                        </select>
                    </label>
                </div>
            </div>
            <!--就读年限-->
            <!--根据学历获取-->
            <div class="layui-form-item">
                <label class="layui-form-label">就读年限</label>
                <div class="layui-input-block">
                    <!--<select name="role" xm-select="role-select"-->
                    <label>
                        <!-- <select id="studyYear-select" name="studyYear" xm-select="role-select" lay-verify="required"
                            lay-vertype="tips">
                            <option value="">请选择</option>
                            <option value="0">专科</option>
                            <option value="1">本科</option>
                            <option value="2">研究生</option>
                            <option value="3">硕士</option>
                            <option value="3">博士</option>
                        </select> -->
                        <select id="studyYear-select" name="studyYear" xm-select="role-select"
                            lay-verify="required" lay-vertype="tips">
                            <option value="">请选择</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>
                    </label>
                </div>
            </div>
            <!--政治面貌-->
            <!--取值：{群众、党员}-->
            <div class="layui-form-item">
                <label class="layui-form-label">政治面貌</label>
                <div class="layui-input-block">
                    <label>
                        <select id="politicalStatus-select" name="politicalStatus" xm-select="role-select"
                            lay-verify="required" lay-vertype="tips">
                            <option value="">请选择</option>
                            <option value="0">群众</option>
                            <option value="1">党员</option>
                        </select>
                    </label>
                </div>
            </div>
            <!--家庭地址-->
            <!--手写-->
            <div class="layui-form-item">
                <label for="address" class="layui-form-label">家庭地址</label>
                <div class="layui-input-block">
                    <input type="text" id="address" name="address" value="" lay-verify="required" lay-vertype="tips"
                        autocomplete="off" class="layui-input">
                </div>
            </div>

            <!--增加-->
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left:0;text-align:center;">
                    <!--                    <input type="hidden" id="deptId" name="deptId" value="">-->
<!--                    <input type="hidden" id="userId" name="userId" value="">-->
                    <button class="layui-btn layui-btn-normal btn-w100" lay-submit="" lay-filter="add">增加</button>
                </div>
            </div>
        </form>
    </div>

     <script src="/js/jquery.js"></script>
<!--    <script src="./jq.js"></script>-->
<!--    <script src="./layui-v2.6.8/layui/layui.js"></script>-->
    <script src="/manageSystem/layui/layui.js"></script>
    <!--    <script src="/manageSystem/layui/extend/formSelects-v4.js"></script>-->
    <script src="/manageSystem/js/common.js"></script>
    <!--服务器路径配置-->
    <script src="/js/myWebConfig.js"></script>
    <script>
        $.ajaxSettings.async = true;   //恢复异步执行
    </script>

    <script>
        layui.config({
            // base: '/layui/extend/'
            base: '/manageSystem/layui/extend/'
        })
            // .extend({
            // formSelects: 'formSelects-v4'
            // }).use(['form', 'layer', 'formSelects', 'dtree'], function () {
            // })
            .use(['form', 'layer', 'dtree'], function () {
                $ = layui.jquery;
                var form = layui.form
                    , layer = layui.layer
                // , dtree = layui.dtree;

                /*获取入学类型信息*/
                /*
                dtree.renderSelect({
                    elem: "#admissionType",
                    // url: "/data/dept/tree.json",
                    // 获取入学类型信息。
                    // url: "http://localhost:8080/getAdmissionType",
                    url: webUrl+studentsDataPrefix+"/getAdmissionType",
                    dataStyle: "layuiStyle",    //使用layui风格的数据格式
                    width: "100%",
                    method: "GET",
                    dot: false,
                    accordion: true,
                    // menubar: true,
                    response: {
                        statusCode: 0,
                        message: "msg",
                        treeId: "id",
                        parentId: "parentId",
                        title: "name"
                    }
                });
    
                dtree.on("node('admissionType')" ,function(obj){
                    console.log("obj对象")
                    console.log(obj)
                    $("#deptId").val(obj.param.nodeId);
                });
                */

                // 性别判断。
                $("#idCard").blur(function () {
                    console.log("id的值")
                    let genderIf = $("#idCard").val()
                    // 身份证是18位
                    if (genderIf.length === 18) {
                        // 判断性别
                        // 222222200022222222
                        if (genderIf.slice(16, 17) % 2 === 0) {
                            console.log("性别：女")
                            $("#gender").next().empty()
                            $("#gender").next().append(
                                "<input type=\"radio\" id=\"man\" name=\"gender\" value=\"1\" title=\"男\" disabled>" +
                                "<div class=\"layui-unselect layui-form-radio\"><i class=\"layui-anim layui-icon\"></i><div>男</div></div>" +
                                "<input type=\"radio\" id=\"woman\" name=\"gender\" value=\"0\" title=\"女\" checked>" + /*选中女*/
                                "<div class=\"layui-unselect layui-form-radio layui-form-radioed\"><i class=\"layui-anim layui-icon layui-anim-scaleSpring\"></i><div>女</div></div>")
                        } else {
                            console.log("性别：男")
                            $("#gender").next().empty()
                            $("#gender").next().append(
                                "<input type=\"radio\" id=\"woman\" name=\"gender\" value=\"1\" title=\"男\" checked>" + /*选中男*/
                                "<div class=\"layui-unselect layui-form-radio layui-form-radioed\"><i class=\"layui-anim layui-icon layui-anim-scaleSpring\"></i><div>男</div></div>" +
                                "<input type=\"radio\" id=\"man\" name=\"gender\" value=\"0\" title=\"女\" disabled>" +
                                "<div class=\"layui-unselect layui-form-radio\"><i class=\"layui-anim layui-icon\"></i><div>女</div></div>")
                        }
                        console.log("出生日期：" + genderIf.slice(6, 14))
                        console.log("出生年份：" + genderIf.slice(6, 10))
                        console.log("当前年份：" + new Date().getFullYear())
                    } else {
                        $("#gender").next().empty()
                        $("#gender").next().append(
                            "<input type=\"radio\" id=\"woman\" name=\"gender\" value=\"1\" title=\"男\" disabled>" +
                            "<div class=\"layui-unselect layui-form-radio\"><i class=\"layui-anim layui-icon\"></i><div>男</div></div>" +
                            "<input type=\"radio\" id=\"man\" name=\"gender\" value=\"0\" title=\"女\" disabled>" +
                            "<div class=\"layui-unselect layui-form-radio\"><i class=\"layui-anim layui-icon\"></i><div>女</div></div>")
                        layer.msg("请输入18位身份证号：", { icon: 5 })
                    }
                })

                // 判断学号是否存在。
                $("#studentId").on("blur", function () {
                    $.get(webUrl +studentsDataPrefix+ "/getStudentName/"+$("#studentId").val(), function (data) {
                        console.log("数据部分。")
                        console.log(data)
                        if (data!='null'){
                            layer.msg("该学生已经存在。", { time: 3000,icon: 0 });
                            $("#studentName").val(data)
                        }
                    })
                })

                form.on('submit(add)', function (form) {
                    console.log("提交之后！")
                    // console.log(form)
                    // console.log("表单序列化")
                    console.log(form)

                    // var fields1 = $("#add-student-form").serialize()

                    $.ajax({
                        url: webUrl + studentsDataPrefix + "/studentInfo",
                        type: 'POST',
                        contentType: "application/json",//设置请求参数类型为json字符串
                        dataType: "json",
                        data: JSON.stringify(form.field),
                        success: function( response ) {
                            console.log("回传的数据")
                            console.log(response)
                            if (response.msg=="成功"){
                                layer.msg(response.msg, { icon: 6 });
                                setTimeout(function () {
                                    window.location.href = window.location.pathname
                                }, 3000)
                            }else {
                                if (response.msg==undefined){
                                    layer.msg("服务器出错啦！", { icon: 4 });
                                }else {
                                    layer.msg(response.msg, { icon: 5 });
                                }
                            }
                        }
                    });
                    // console.log("url:" + window.location.pathname)
                    // 3秒后跳转
                    return false;
                });
            });
    </script>
    <!-- 入学日期 -->
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#test'
                , format: 'yyyy-MM-dd'
            });
        });
    </script>
    <script>
        let layui_input = document.querySelectorAll('.layui-input');
        let studentIdReg = /^[0-9]{10}$/,
            studentNameReg = /^[\u4e00-\u9fa5A-Za-z]{2,5}$/,
            idCardReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        let popup = [{ id: '学号' }, { id: '姓名' }, { id: '身份证' }];
        regexp(layui_input[0], popup[0].id, studentIdReg);
        regexp(layui_input[1], popup[1].id, studentNameReg);
        regexp(layui_input[2], popup[2].id, idCardReg);
        function regexp(ele, popup, reg) {
            ele.addEventListener('blur', function () {
                if (this.value == '') {
                    layer.msg(popup + '不能为空！', {
                        icon: 5,
                        time: 1000
                    })
                } else if (reg.test(this.value)) {
                    console.log('正确的');
                } else {
                    console.log('错误的');
                    console.log(this)
                    console.log("是不是学号？" + (this.id === "studentName") )
                    // 学号。
                    if (this.id === "studentId"){
                        layer.msg(popup + '为10位数字！', {
                            icon: 5,
                            time: 1000
                        })
                    }
                    // 姓名。
                    else if (this.id === "studentName"){
                        layer.msg(popup + '为2-5个字符！', {
                            icon: 5,
                            time: 1000
                        })
                    }
                    /*else {
                        layer.msg(popup + '格式不正确！！！', {
                            icon: 5,
                            time: 1000
                        })
                    }*/
                }
            })
        }
    </script>
</body>

</html>